<template>
  <div class="global">
    <div class="head">
      <h1>问诊</h1>
    </div>
    <div class="wenzhen" >
      <div class="three" @click="xzks">
        <img src="../assets/jswz.png" alt="" />
        <div class="icontitle">极速问诊</div>
        <div class="iconcontent">20s极速问诊</div>
      </div>
    </div>
    <van-swipe :autoplay="3000" :height="160">
      <van-swipe-item
        ><img
          src="../assets/xrdlb.png"
          style="width: 100%; height: 103px"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <van-tabs v-model="activeName" @change="xgtab">
      <van-tab name="like" title="关注" />
      <van-tab name="recommend" title="推荐" />
      <van-tab name="fatReduction" title="减脂" />
      <van-tab name="food" title="饮食" />
    </van-tabs>
    <div v-if="activeName == 'like'" class="like1">
      <div class="tjgz">
        <div class="tjtitle">推荐关注</div>
        <div></div>
      </div>
      <div class="doctor">
        <div class="doctorlist" v-for="item in doctor">
          <div class="avator1">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="name1">
            {{ item.hospitalName }}{{ item.depName }}{{ item.positionalTitles }}
          </div>
          <div class="gz">
            <van-button
              
              @click="guanzhu1(item, 1)"
              type="danger"
              v-if="item.likeFlag !== 1"
              style="border-radius: 26px; width: 100px; height: 28px"
              >+关注</van-button
            >
            <van-button
              
              type="danger"
              @click="guanzhu1(item, 0)"
              v-else
              style="border-radius: 26px; width: 100px; height: 28px"
              >已关注</van-button
            >
          </div>
        </div>
      </div>
    </div>

    <van-list
      class="newslist"
      @load="onLoad"
      v-model="searchRefreshing"
      :finished="finished"
      finished-text="没有更多了"
      @refresh="searchOnRefresh"
    >
      <div class="news" v-for="item in list">
        <div class="newshead">
          <div class="newsheadleft">
            <div class="avator">
              <img src="../assets/deafaultAvatar.jpg" alt="" />
            </div>
            <div class="avatorjj">
              <div class="name">{{ item.creatorName }}</div>
              <div class="address">
                {{ item.creatorHospatalName }}{{ item.creatorDep
                }}{{ item.creatorTitles }}
              </div>
            </div>
          </div>
          <div>
            <van-button
              plain
              @click="guanzhu(item, 1)"
              type="danger"
              v-if="item.likeFlag !== 1"
              style="border-radius: 26px; width: 100px; height: 28px"
              >+关注</van-button
            >
            <van-button
              plain
              type="danger"
              @click="guanzhu(item, 0)"
              v-else
              style="border-radius: 26px; width: 100px; height: 28px"
              >已关注</van-button
            >
          </div>
        </div>
        <div class="newstitle" v-html="item.title"></div>
        <p class="newscontent" v-html="item.content"></p>
        <div class="newimglist">
          <div v-for="item1 in item.coverUrl">
            <img :src="item1" alt="" />
          </div>
        </div>
        <div class="shoucangpl">
          {{ item.collectionNumber }}收藏 {{ item.commentNumber }}评论
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import service from "../request";
export default {
  data() {
    return {
      socket: "",
      searchRefreshing: false,
      activeName: "like",
      doctor: [],
      current: 1,
      pageSize: 10,
      pageTotal: 0,
      finished: false,
      list: [],
    };
  },
  mounted() {
    this.getdata();
    this.getdoctor();
  },
  methods: {
    xzks(){
      this.$router.push({
        path:"/xzks"
      })
    },
    async getdoctor() {
      const res = await service.get("/home/page/doc", {
        params: {
          current: 1,
          pageSize: 5,
        },
      });
      console.log(res);
      this.doctor = res.data.rows;
    },
    async guanzhu(i, b) {
      const res = await service.post("/like", {
        type: "knowledge",
        id: i.id,
      });
      console.log(res);
      if (res.code == 10000) {
        i.likeFlag = b;
      }
    },
   async guanzhu1(i,b){
  const res = await service.post("/like", {
        type: "doc",
        id: i.id,
      });
      console.log(res);
      if (res.code == 10000) {
        i.likeFlag = b;
      }
    },
    xgtab(e) {
      console.log(e);
      this.activeName = e;
      this.current = 1;
      this.finished = false;
      this.list = [];
      this.getdata();
    },
    async getdata() {
      const res = await service.get("/patient/home/knowledge", {
        params: {
          type: this.activeName,
          current: this.current,
          pageSize: this.pageSize,
        },
      });
      console.log(res);
      if (res.code == 10000) {
        this.searchRefreshing = false;
        this.pageTotal = res.data.pageTotal;
      }
      if (res.data.rows.length !== 0) {
        this.list = [...this.list, ...res.data.rows];
        console.log(this.list);
      }
    },
    onLoad() {
      console.log("下拉刷新");
      // this.finished=false

      console.log(this.current);
      if (this.current < this.pageTotal) {
        this.current++;
        this.finished == false;
        this.getdata();
      } else if (this.current == this.pageTotal) {
        this.finished = true;
        console.log("true");
      }

      console.log(this.finished);
    },
    searchOnRefresh() {
      console.log("下拉刷新");
    },
  },
};
</script>
<style>
.news {
  padding: 10px;
  box-sizing: border-box;
}
.newscontent img {
  display: none;
}
.van-swipe {
  height: 104px;
}
.van-tab {
  flex: 0.15;
}
.van-tabs__line {
  width: 17px;
  transform: translateX(90px) translateX(-50%);
}
</style>
<style scoped>
.name {
  text-align: center;
}
.gz{
  text-align: center;
}
.name1 {
  text-align: center;
  width: 90%;
  white-space: normal;
  margin-top: 10px;
  height: 50px;
  margin-bottom: 15px;
  font-size: 12px;
  color: #c3c3c5;
}
.avator1 img {
  width: 38px;
  border-radius: 50%;
}
.avator1 {
  width: 100%;
  text-align: center;
}
.doctorlist {
  width: 149px;
  height: 200px;
  background: #fff;
  border-radius: 10px;
  position: relative;
  margin-right: 10px;
  padding: 15px;
  box-sizing: border-box;
  display: inline-block;
}
.like1 {
  background: #e5e5e5;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.doctor {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;
}
.tjgz {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px;
  box-sizing: border-box;
}
.shoucangpl {
  width: 100%;
  height: auto;
  color: #c3c3c5;
  font-size: 13px;
  margin-top: 10px;
}
.newimglist div img {
  width: 100%;

  border-radius: 10px;
}
.newimglist div {
  width: 30%;
  height: auto;
}
.newimglist {
  display: flex;
  justify-content: space-between;
}
.newstitle {
  margin-top: 10px;
  font-size: 16px;
  color: #000;
}
.address {
  color: #c3c3c5;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.newscontent {
  color: #c3c3c5;
  font-size: 13px;
  margin: 10px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.name {
  font-size: 14px;
  color: #000;
}
.avatorjj {
  margin-left: 15px;
  float: left;
  width: calc(100% - 101px);
}
.avator img {
  width: 100%;
  border-radius: 50%;
  height: 100%;
}
.avator {
  width: 38px;
  height: 38px;
  float: left;
}
.newsheadleft {
  overflow: hidden;
}
.newshead {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: auto;
  border-bottom: 1px solid #e5e5e5;
}
.newslist {
  width: 100%;
  height: auto;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.icontitle {
  text-align: center;
  color: #000;
  font-size: 15px;
}
.iconcontent {
  text-align: center;
  color: #e5e5e5;
  font-size: 12px;
}
.three img {
  width: 48px;
  height: 48px;
}
.three {
  width: 30%;
  height: auto;
  text-align: center;
  margin: 0 auto;
}
.wenzhen {
  width: 100%;
  height: auto;
}
.global {
  width: 100%;
  height: 100%;
}
.head h1 {
  text-align: center;
  color: #fff;
}
.head {
  width: 100%;
  height: 24vw;
  background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
  border-bottom-left-radius: 40vw 5.33333vw;
  overflow: hidden;

  border-bottom-right-radius: 40vw 5.33333vw;
}
</style>
